import React, {PureComponent} from 'react'
import { WriterTitle, FindMore, ListContent, WriterList} from '../style'
import { connect } from 'react-redux'
import { Icon } from 'antd'
class Writer extends PureComponent{
    render(){ 
            const { writerList } = this.props;
        return(
            <div>
                
                    <WriterTitle>
                        <div className = 'remmendwriter'>推荐作者</div>
                        <div className = 'remmendchange'>换一批</div>
                    </WriterTitle>
                     
                    <WriterList>
                         {   
                           writerList.map((items) => {
                               return (
                                <ListContent key = {items.get('id')}>
                                    <img alt = '' className = 'list-img' src = {items.get('urlImg')} />
                                    <div className = 'concern'>
                                    <Icon type="plus" theme="outlined" />
                                       关注
                                    </div>
                                    <div className = 'List-title' >{items.get('title')}</div>
                                    <p className = 'culture'>写了{items.get('culture1')}k字 · {items.get('culture2')}喜欢</p>
                                </ListContent>
                               )
                            
                            })
                            } 
                
                        
                     </WriterList>
                     <FindMore>
                         查看全部
                     </FindMore>
            </div>
        )
    }
}
const mapState = (state) => {
    return{
        writerList: state.get('board').get('writerList')
    }
}
export default connect(mapState, null)(Writer);